<template>
	<div>
		<el-form :inline="true" :model="query" label-width="130px" size="small">
			<!-- 孵化公司级别 -->
			<el-form-item label="孵化级别：" class="query-form-item">
				<el-select v-model="query.companyLevel" placeholder="请选择孵化级别" @change="onSubmit" clearable>
					<el-option label="全部" value=''></el-option>
					<el-option label="县级公司" value="4"></el-option>
					<el-option label="市级公司" value="3"></el-option>
					<el-option label="省级公司" value="2"></el-option>
					<el-option label="全球公司" value="1"></el-option>
				</el-select>
			</el-form-item>
			<!-- 申请状态  0.孵化中 1.孵化成功 2.孵化失败-->
			<el-form-item class="query-form-item" label="孵化状态：">
				<el-select v-model="query.incubationStatus" placeholder="请选择孵化状态" @change="onSubmit" clearable>
					<el-option label="全部" value=''></el-option>
					<el-option label="孵化中" value="0"></el-option>
					<el-option label="孵化成功" value="1"></el-option>
					<el-option label="孵化失败" value="2"></el-option>
				</el-select>
			</el-form-item>
			<!-- 申请商城账号查询 -->
			<el-form-item label="申请商城账号：" class="query-form-item">
				<el-input v-model="query.account" placeholder="申请商城账号" prefix-icon="el-icon-search"
					@keyup.enter.native="onSubmit" clearable></el-input>
			</el-form-item>
		</el-form>
		<el-form :inline="true" :model="query" label-width="130px" size="small">
			<!-- 孵化开始时间： -->
			<el-form-item label="孵化开始时间：">
				<el-date-picker v-model="createTime" unlink-panels type="datetimerange" :picker-options="pickerOptions"
					range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align="left"
					format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
					:default-time="['00:00:00', '23:59:59']" @change="startDateChange"></el-date-picker>
			</el-form-item>
		</el-form>
		<el-form :inline="true" :model="query" label-width="130px" size="small">
			<!-- 孵化结束时间： -->
			<el-form-item label="孵化结束时间：">
				<el-date-picker v-model="endTime" unlink-panels type="datetimerange" :picker-options="pickerOptions"
					range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align="left"
					format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
					:default-time="['00:00:00', '23:59:59']" @change="endDateChange"></el-date-picker>
			</el-form-item>
			<!-- 查询框 -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-refresh" @click="onRest" size="small"></el-button>
				<el-button type="primary" icon="el-icon-search" @click="onSubmit" size="small">查询</el-button>
			</el-form-item>
		</el-form>
		<!-- table表单 -->
		<el-table ref="singleTable" :data="tableData" v-loading="loading" style="width: 100%">
			<el-table-column label="序号" type="index" align="center" width="50">
			</el-table-column>
      <el-table-column prop="userMobile" align="center" label="申请商城账号" width="140"></el-table-column>
      <el-table-column prop="userEnterpriseName" align="center" label="申请商城公司名称" width="200"></el-table-column>
			<el-table-column prop="incubationStatus" align="center" label="孵化状态" width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.incubationStatus == 0" style="color: #ffa659">孵化中</span>
					<span v-else-if="scope.row.incubationStatus == 1" style="color: #4acf1e">孵化成功</span>
					<span v-else-if="scope.row.incubationStatus == 2" style="color: #dc0101">孵化失败</span>
				</template>
			</el-table-column>
			<el-table-column prop="companyLevel" align="center" label="孵化级别" width="180">
				<template slot-scope="scope">
					<span v-if="scope.row.companyLevel == 1" style="color: #ffa659">全球公司</span>
					<span v-else-if="scope.row.companyLevel == 2" style="color: #4acf1e">省级公司</span>
					<span v-else-if="scope.row.companyLevel == 3" style="color: #4acf1e">市级公司</span>
					<span v-else-if="scope.row.companyLevel == 4" style="color: #4acf1e">县级公司</span>
				</template>
			</el-table-column>
      <el-table-column prop="incubationBeginTime" align="center" label="孵化开始时间" width="180">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.incubationBeginTime != null"></i>
					<span v-if="scope.row.incubationBeginTime != null">{{
            scope.row.incubationBeginTime | formatDateStr("yyyy-MM-dd ")
          }}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
			<el-table-column prop="incubationEndTime" align="center" label="孵化结束时间" width="180">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.incubationEndTime != null"></i>
					<span v-if="scope.row.incubationEndTime != null">{{
            scope.row.incubationEndTime | formatDateStr("yyyy-MM-dd ")
          }}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
      <!-- 全球公司 -->
			<el-table-column prop="brandCompanyName" align="center" label="全球公司名称" width="200"></el-table-column>
      <el-table-column prop="brandCompanyStatus" align="center" label="全球公司孵化状态" width="140">
				<template slot-scope="scope">
					<span v-if="scope.row.brandCompanyStatus == 0" style="color: #ffa659">孵化中</span>
					<span v-else-if="scope.row.brandCompanyStatus == 1" style="color: #4acf1e">孵化成功</span>
					<span v-else-if="scope.row.brandCompanyStatus == 2" style="color: #dc0101">孵化失败</span>
				</template>
			</el-table-column>
      <el-table-column prop="brandCompanyOfficialTime" align="center" label="全球公司转正时间" width="180">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.brandCompanyOfficialTime != null"></i>
					<span v-if="scope.row.brandCompanyOfficialTime != null">{{
            scope.row.brandCompanyOfficialTime | formatDateStr("yyyy-MM-dd ")
          }}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
			<!-- 省级公司 -->
      <el-table-column prop="provinceCompanyName" align="center" label="省级公司名称" width="200"></el-table-column>
      <el-table-column prop="provinceCompanyStatus" align="center" label="省级公司孵化状态" width="140">
				<template slot-scope="scope">
					<span v-if="scope.row.provinceCompanyStatus == 0" style="color: #ffa659">孵化中</span>
					<span v-else-if="scope.row.provinceCompanyStatus == 1" style="color: #4acf1e">孵化成功</span>
					<span v-else-if="scope.row.provinceCompanyStatus == 2" style="color: #dc0101">孵化失败</span>
				</template>
			</el-table-column>
      <el-table-column prop="provinceCompanyOfficialTime" align="center" label="省级公司转正时间" width="180">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.provinceCompanyOfficialTime != null"></i>
					<span v-if="scope.row.provinceCompanyOfficialTime != null">{{
            scope.row.provinceCompanyOfficialTime | formatDateStr("yyyy-MM-dd ")
          }}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
      <!-- 市级公司 -->
      <el-table-column prop="cityCompanyName" align="center" label="市级公司名称" width="200"></el-table-column>
      <el-table-column prop="cityCompanyStatus" align="center" label="市级公司孵化状态" width="140">
				<template slot-scope="scope">
					<span v-if="scope.row.cityCompanyStatus == 0" style="color: #ffa659">孵化中</span>
					<span v-else-if="scope.row.cityCompanyStatus == 1" style="color: #4acf1e">孵化成功</span>
					<span v-else-if="scope.row.cityCompanyStatus == 2" style="color: #dc0101">孵化失败</span>
				</template>
			</el-table-column>
      <el-table-column prop="cityCompanyOfficialTime" align="center" label="市级公司转正时间" width="180">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.cityCompanyOfficialTime != null"></i>
					<span v-if="scope.row.cityCompanyOfficialTime != null">{{
            scope.row.cityCompanyOfficialTime | formatDateStr("yyyy-MM-dd ")
          }}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
      <!-- 县级公司 -->
      <el-table-column prop="countyCompanyName" align="center" label="县级公司名称" width="200"></el-table-column>
      <el-table-column prop="countyCompanyStatus" align="center" label="县级公司孵化状态" width="140">
				<template slot-scope="scope">
					<span v-if="scope.row.countyCompanyStatus == 0" style="color: #ffa659">孵化中</span>
					<span v-else-if="scope.row.countyCompanyStatus == 1" style="color: #4acf1e">孵化成功</span>
					<span v-else-if="scope.row.countyCompanyStatus == 2" style="color: #dc0101">孵化失败</span>
				</template>
			</el-table-column>
      <el-table-column prop="countyCompanyOfficialTime" align="center" label="县级公司转正时间" width="180">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.countyCompanyOfficialTime != null"></i>
					<span v-if="scope.row.countyCompanyOfficialTime != null">{{
            scope.row.countyCompanyOfficialTime | formatDateStr("yyyy-MM-dd ")
          }}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination class="pagination-container" background :page-size="query.page.pageSize"
			@size-change="handleSizeChange" @current-change="handleCurrentChange"
			layout="total,sizes,prev, pager, next, jumper" :current-page="this.query.currentPage"
			:page-sizes="[5, 10, 20, 30, 50]" :total="totalNumber"></el-pagination>
	</div>
</template>
<script>
	import {
		getBusBuildIncubationCompanyList
	} from "../../api/incubationTeam/incubationTeam.js";
	export default {
		data() {
			return {
				tableData: [], //列表集合
				createTime: [], //开始时间数组
                endTime:[],//结束时间数组
				pickerOptions: {
					//快速选择日期
					shortcuts: [{
							text: "最近一周",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近一个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近三个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近六个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
								picker.$emit("pick", [start, end]);
							},
						},
					],
				},
				query: {
					page: {
	            	    currentPage: 1,
	            	    pageSize: 5
	                },
					account: "",
	                companyLevel: '',//1.全球品牌合伙公司 2.省级公司 3.市级公司 4.县级公司
	                endDate1: "",
	                endDate2: "",
	                incubationStatus: '',//0.孵化中 1.孵化成功 2.孵化失败
					startDate1: "",
	                startDate2: "",
				},
				selectData: [], //多选数组
				totalNumber: 0,
				loading: false,
			};
		},
		methods: {
			/*孵化开始时间选择事件*/
			startDateChange(val) {
				if (val == null) {
					this.query.startDate1 = "";
					this.query.startDate2 = "";
				} else {
					this.query.startDate1 = val[0];
					this.query.startDate2 = val[1];
					this.query.page.currentPage = 1;
				}
				this.getList();
			},
			/*孵化结束时间选择事件 */
			endDateChange(val){
				if (val == null) {
					this.query.endDate1 = "";
					this.query.endDate2 = "";
				} else {
					this.query.endDate1 = val[0];
					this.query.endDate2 = val[1];
					this.query.page.currentPage = 1;
				}
				this.getList();
			},
			// 列表数据获取
			getList() {
				this.loading = true;
				getBusBuildIncubationCompanyList(this.query)
					.then((data) => {
						console.log(data);
						if (data.code != 0) {
							this.$message.error(response.message);
							this.loading = false;
							return false;
						}
						this.tableData = data.data.list || [];
						this.totalNumber = data.data.totalNumber || 0;
						// console.log(this.tableData)
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch((err) => {
						this.loading = false;
						this.tableData = [];
					});
			},
			//刷新
			onRest() {
				this.$router.push({
					path: "",
				});
				(this.createTime = []),
				(this.endTime = []),
				(this.query = {
					page: {
	            	    currentPage: 1,
	            	    pageSize: 5
	                },
					account: "",
	                companyLevel: '',//1.全球品牌合伙公司 2.省级公司 3.市级公司 4.县级公司
	                endDate1: "",
	                endDate2: "",
	                incubationStatus: '',//0.孵化中 1.孵化成功 2.孵化失败
					startDate1: "",
	                startDate2: "",
				});

				this.getList();
			},

			//查询
			onSubmit() {
				this.query.page.currentPage = 1;
				this.getList();
				// console.log('submit!');
			},
			handleCurrentChange(val) {
				this.query.page.currentPage = val;
				//scrollTo(0, 800);
				this.getList();
			},
			handleSizeChange(val) {
				this.query.page.pageSize = val;
				this.getList();
			},
		},

		mounted() {},
		created() {
			this.getList();
		},
	};
</script>
